// 导入 React 让当前的 JS 文件支持 JSX 写法
import React from 'react';

// React 脚手架工具，把样式文件都可以看做是 对象
import styles from './style.module.css';
// 打印结果是个对象名字的映射 
// 原名字叫 header 映射成了什么？在 变量中记录了起来
console.log(styles);

class Header extends React.Component {
    render() {
        return (
            /* 改类名写法 */
            <header >
                <h1 className={styles.header}>一级标题：页面头部组件</h1>
                <h2>二级标题：副标题</h2>
                <h2 className={styles.header_body}>二级标题：副标题</h2>
                <h2 className={styles.headerBody}>二级标题：副标题</h2>

                {/* 拓展用法，全局类名和局部类名都要该怎么写  */}
                {/* 花括号内就是写 JS 的地方，爱怎么写就怎么写 */}
                <h3 className={styles.header + ' btn'}>全局类名和局部类名都要</h3>
                <h3 className={`${styles.header} btn`}>全局类名和局部类名都要</h3>
                <h3 className={[styles.header, 'btn', 'bb'].join(' ')}>全局类名和局部类名都要</h3>
            </header>
        );
    }
}


// 导入，因为 JS 都是模块化的
export default Header;
